<template>
  <div class="add-page">
    <div class="article-form">
      <el-form
        ref="articleForm"
        :model="articleForm"
        :rules="rule"
        label-width="80px"
        label-position="left"
      >
        <el-form-item label="标题" prop="title">
          <el-input
            placeholder="请输入文章标题"
            v-model="articleForm.title"
            style="width: 400px"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="摘要" prop="brief">
          <el-input
          type="textarea"
            placeholder="请输入文章摘要"
            :rows="3"
            v-model="articleForm.brief"
            style="width: 400px"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="所属分类" prop="categoryId">
          <el-select
            v-model="articleForm.categoryId"
            placeholder="请选择文章分类"
            style="width: 400px"
          >
            <el-option
              v-for="item in categoryOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="文章封面" prop="mainImg">
          <el-upload
            v-model="articleForm.mainImg"
            :action="avatarRequestUrl"
            list-type="picture-card"
            :on-remove="handleRemove"
            :on-success="handleSuccess"
            :headers="httpHeader"
            :limit="1"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-form>
    </div>
    <editor-bar
      v-model="detail"
      :isClear="isClear"
      :otherHeight="600"
      @change="change"
      @getCount="getCount"
    ></editor-bar>
    <div style="text-align: center; margin-top: 20px">
      <el-button
        plain
        style="background: #ea6f5a; color: #fff; border-radius: 20px"
        @click="submitForm"
        >保存文章</el-button
      >
    </div>
  </div>
</template>
<script>
import EditorBar from '../../../components/wangEnduit/index.vue'
import { baseURL } from '../../../util/request'
export default {
  name: 'article-add',
  data: () => {
    return {
      baseURL,
      isClear: false,
      detail: '',
      articleForm: {},
      categoryOptions: [],
      httpHeader: {
        authorization: null
      },
      rule: {
        title: [
          { required: true, message: '请填写文章标题', trigger: 'blur' },
          {
            min: 3,
            max: 20,
            message: '文章标题长度在 1 到 20 个字符',
            trigger: 'blur'
          }
        ],
        brief: [
          { required: true, message: '请填写文章摘要', trigger: 'blur' },
          {
            min: 3,
            max: 100,
            message: '文章标题长度在 1 到 20 个字符',
            trigger: 'blur'
          }
        ],
        categoryId: [
          { required: true, message: '请选择文章所属分类', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    avatarRequestUrl () {
      return this.baseURL + '/user/uploadAvatar'
    }
  },
  components: {
    EditorBar
  },
  methods: {
    change (val) {
      this.articleForm.content = val
    },
    getCount (count) {
      this.count = count
    },
    handleSuccess (res, file, fileList) {
      this.articleForm.mainImg = res.result.url
      this.$message.success('封面上传成功')
    },
    handleRemove (file, fileList) {
      this.articleForm.mainImg = ''
    },
    async getCategory () {
      const res = await this.$store.dispatch('article/GET_CATEGORY', {})
      if (res && res.status === 200) {
        this.categoryOptions = res.result.list.map((v) => ({
          label: v.category_name,
          value: v.id
        }))
      }
    },
    submitForm () {
      const that = this
      const { articleForm, categoryOptions } = this
      this.$refs.articleForm.validate(async (valid) => {
        if (valid) {
          const form = { ...articleForm }
          form.words_count = that.count
          form.categoryName = categoryOptions.filter(v => v.value === form.categoryId)[0].label
          const res = await that.$store.dispatch('article/SAVE_ARTICLE', form)
          // console.log(res)
          if (res.status === 200) {
            this.$message.success('新增文章成功')
            this.$router.push(`/article/detail/${res.result.id}`)
          }
        } else {
          // console.log('error submit!!')
          return false
        }
      })
    }
  },
  mounted () {
    this.getCategory()
  },
  created () {
    this.httpHeader.authorization = this.$store.state.token
  }
}
</script>
<style scoped>
</style>
